<template>
  <div>
    <!-- 头部面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home ' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-input placeholder="请输入内容" v-model="indexinput" clearable @blur="getOrdersList" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="getOrdersList"></el-button>
      </el-input>
      <!-- 表单区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="order_number" label="商品编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否支付">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_status == 1">已支付</el-tag>
            <el-tag type="danger" v-if="scope.row.pay_status == 0">未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货">
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.create_time | formdate }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="Eitd" icon="el-icon-edit"></el-button>
            <el-button type="success" @click="kuaidi" icon="el-icon-location"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageinfo.pagenum" :page-sizes="[10, 15, 20, 25]" :page-size="pageinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑窗口" :visible.sync="EitdVisible" width="50%" @close="addEitdVisible">
      <el-form ref="addform" :model="addform" label-width="80px">
        <el-form-item label="省市区/县" prop="select1">
          <el-cascader v-model="addform.select1" :options="citydata" :props="{ expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="select2">
          <el-input v-model="addform.select2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EitdVisible = false">取 消</el-button>
        <el-button type="primary" @click="EitdVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 定义物流信息对话框 -->
    <el-dialog title="提示" :visible.sync="kuaidiVisible" width="30%">
      <el-timeline :reverse="false">
        <el-timeline-item v-for="(activity, index) in kuaidiData" :key="index" :timestamp="activity.time">
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="kuaidiVisible = false">取 消</el-button>
        <el-button type="primary" @click="kuaidiVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import citydata from './citydata'
export default {
  data() {
    return {
      // 绑定搜索数据
      indexinput: '',
      // 定义表单数据
      tableData: [],
      // 定义分页参数

      pageinfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 总条数
      total: 0,
      // 编辑对话框是否显示
      EitdVisible: false,
      // 定义修改表单数据
      addform: {},
      // 定义地区数据
      citydata,
      //定义物流对话框是否显示
      kuaidiVisible: false,
      //接受物流信息
      kuaidiData: []
    }
  },
  created() {
    this.getOrdersList()
  },
  methods: {
    async getOrdersList() {
      this.pageinfo.query = this.indexinput
      const { data: res } = await this.$http.get('orders', { params: this.pageinfo })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.total = res.data.total
      this.tableData = res.data.goods
    },
    handleSizeChange(val) {
      this.pageinfo.pagesize = val
      this.getOrdersList()
    },
    handleCurrentChange(val) {
      this.pageinfo.pagenum = val
      this.getOrdersList()
    },
    // 修改函数
    Eitd() {
      this.EitdVisible = true
    },
    handleChange(value) {
      console.log(value)
      console.log(this.addform)
    },
    addEitdVisible() {
      this.$refs.addform.resetFields()
    },
    //定义物流信息
    async kuaidi() {
      this.kuaidiVisible = true
      const { data: res } = await this.$http.get('/kuaidi/1106975712662');
      this.kuaidiData = res.data;
      console.log(res);
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 300px;
}
</style>
